<!DOCTYPE html>
<!--  xmlns:th="http://www.thymeleaf.org" -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员信息</title>
    <link rel="stylesheet" href="/res/css/global.css">
    <link rel="stylesheet" href="/res/css/main.css">
    <link rel="stylesheet" href="/res/css/find_customer.css">
    <link rel="stylesheet" href="/res/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>

<!-- 外部容器 -->
<div id="container">
    <!-- 左边的导航 -->
    <div id="nav-list" class="left">
        <h2>
            <span></span>
            &nbsp;&nbsp;
            <span></span>
            &nbsp;&nbsp;
            <a href="/emp/logout">退出</a>
        </h2>
        <ul>
            <li><a href="/main">主页</a></li>
            <li><a href="/customer/select_customer">会员管理</a></li>
            <li><a href="/emp/select_emp">员工管理</a></li>
            <li><a href="#">二手车管理</a></li>
            <li><a href="#">门店管理</a></li>
            <li><a href="/system/main">系统设置</a></li>
        </ul>
    </div>

    <!-- 右边的div -->
    <div id="main-div" class="right">
        <h2>会员集合</h2>
        <!-- 查找会员的表单 -->
        <form action="/customer/select_customer" method="post">
            <table>
                <tr>
                    <td>会员名：</td>
                    <td>
                        <!-- th:value="${cusName}" -->
                        <input type="text" name="cusName" th:value="${cusName}"/>
                    </td>
                    <td>电话：</td>
                    <td>
                        <!-- th:value="${phone}" -->
                        <input type="text" name="phone" th:value="${phone}"/>
                    </td>
                    <td>
                        <input type="submit" value=" 查询会员 "/>
                    </td>
                    <td>
                        <input type="button" value=" 注册会员 " id="show-reg-customer-btn"/>
                    </td>
                </tr>
            </table>
        </form>
        <!-- 会员表格 -->
        <table border="1" id="dataTable">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="check-all"/>
                </th>
                <th>编号</th>
                <th>会员名</th>
                <th>性别</th>
                <th>生日</th>
                <th>地址</th>
                <th>电话</th>
                <th>押金</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c:${customerList}">
                <td>
                    <!-- empid48,empid47 -->
                    <input type="checkbox" th:id="${'cusid'+c.get('id')}"/>
                </td>
                <td th:text="${c.id}"></td>
                <td th:text="${c.cusName}"></td>
                <td th:text="${c.sex}"></td>
                <td th:if="${c.get('birthday')!=null}" th:text="${#dates.format(c.birthday,'yyyy-MM-dd')}">
                </td>
                <td th:if="${c.get('birthday')==null}" th:text="未知日期"></td>
                <td th:text="${c.address}"></td>

                <td th:text="${c.phone}" th:if="${c.get('phone')!=null}"></td>

                <td th:text="电话未知" th:if="${c.get('phone')==null}"></td>

                <td th:text="${c.yajin}"></td>
                <td>
                    <a th:href="@{/customer/show_update_customer(id=${c.id})}">
                        <i class="fa fa-pencil fa-fw"></i>
                    </a>
                    <a th:href="@{/customer/delete_customer(id=${c.id})}"
                    onclick="return confirm('确定删除当前行吗？')">
                        <i class="fa fa-trash-o fa-fw"></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <div th:if="${#lists.size(customerList)>0}">
            每页行数：
            <select style="width: 50px;" id="page-size-btn">
                <option value="2" th:selected="${2 eq pager.pageSize}">2</option>
                <option value="4" th:selected="${4 eq pager.pageSize}">4</option>
                <option value="8" th:selected="${8 eq pager.pageSize}">8</option>
            </select>
            &nbsp;&nbsp;
            第<span th:text="${pager.pageNum}"></span>页/共<span th:text="${pager.pages}"></span>页&nbsp;&nbsp;
            第<span th:text="${pager.startRow}"></span>行-第<span th:text="${pager.endRow}"></span>行&nbsp;&nbsp;
            共<span th:text="${pager.total}"></span>行
            &nbsp;&nbsp;
            <a th:href="@{/customer/select_customer(currentPageNum=1,cusName=${cusName},phone=${phone})}">第一页</a>
            <a th:href="@{/customer/select_customer(currentPageNum=${pager.prePage},cusName=${cusName},phone=${phone})}">上一页</a>
            <a th:href="@{/customer/select_customer(currentPageNum=${pager.nextPage},cusName=${cusName},phone=${phone})}">下一页</a>
            <a th:href="@{/customer/select_customer(currentPageNum=${pager.pages},cusName=${cusName},phone=${phone})}">末页</a>
            &nbsp;&nbsp;
            <input type="text" id="txt-pageNum" value="1" style="width: 30px;"/>&nbsp;&nbsp;
            <input type="button" id="btn-pageNum" value=" GO "/>&nbsp;&nbsp;
            <input type="button" id="btn-batch-del" value=" 批量删除 "/>

        </div>
    </div>

</div>


<!-- 会员注册DIV -->
<div id="reg-customer-div">
    <h2>注册会员</h2>
    <!--  enctype="multipart/form-data" 文件上传 -->
    <form action="/customer/reg_customer" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>会员名：</td>
                <td>
                    <input type="text" name="cusName" id="cusName"/>
                    <span id="msg-cusName"></span>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="男" checked/>男&nbsp;&nbsp;
                    <input type="radio" name="sex" value="女"/>女
                </td>
            </tr>
            <tr>
                <td>生日：</td>
                <td>
                    <input type="date" name="birthday"/>
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>
                    <input type="text" name="address"/>
                </td>
            </tr>
            <tr>
                <td>电话：</td>
                <td>
                    <input type="text" name="phone"/>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="repassword"/>
                </td>
            </tr>
            <tr>
                <td>照片：</td>
                <td>
                    <input type="file" name="head_img" id="head_img"/>
                    <img id="upload_head_img" width="30px" height="30px"/>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value=" 注册会员 "/>&nbsp;&nbsp;
                    <input type="button" value=" 取消 " id="hide-reg-customer-btn"/>
                </td>
            </tr>
        </table>
    </form>
</div>


<!-- 遮罩层div-->
<div id="lock-div"></div>


<script type="text/javascript" src="/res/jquery/jquery.js"></script>
<!-- th:inline="javascript" -->
<script type="text/javascript" th:inline="javascript">
    $(function () {


        // 隔行变色
        $("#dataTable tbody tr:nth-of-type(odd)").css("background-color", "#e0e0e0");

        // 光棒效果
        var backgroundColor;
        $("#dataTable tbody tr").hover(
            function () {
                backgroundColor = $(this).css("background-color");
                $(this).css("background-color", "#aaa");
            },
            function () {
                $(this).css("background-color", backgroundColor);
            }
        );


        // 页码跳转
        $("#btn-pageNum").click(function () {
            // 文本框中当前页码
            var currentPageNum = $("#txt-pageNum").val();
            // el表达式必须放到双中括号中
            var cusName = [[${cusName}]];
            var phone = [[${phone}]];
            // 总的页数
            var pages = [[${pager.pages}]];
            if (currentPageNum < 1 || currentPageNum > pages) {
                alert("页码必须在1到" + pages + "之间！！！");
                return;
            }
            window.location.href = "/customer/select_customer?currentPageNum=" +
                currentPageNum + "&cusName=" + cusName + "&phone=" + phone;
        });

        // 多项选中,多项不选中
        $("#check-all").click(function () {
            // 当前复选框是否选中
            var flag = $(this).is(":checked");
            $("input[type='checkbox'][id^='cusid']").prop("checked", flag);
        });


        // 改变每页的行数
        $("#page-size-btn").change(function () {
            // 下拉列表框中被选中的选项
            var pageSize = $("#page-size-btn option:selected").val();

            // 请求服务器
            $.ajax({
                url: "/system/change_page_size",
                data: {    // 上传参数
                    pageSize: pageSize
                },
                dataType: "json",   // 从服务器返回json数据
                type: "get",        // 请求方式
                success: function (data) {   // 服务器成功返回执行的函数，data是返回的数据
                    console.log(data);
                    if (data.success == true) {
                        window.location.href = "/customer/select_customer";
                    }

                }
            });

        });

        // 批量删除
        $("#btn-batch-del").click(function () {
            var cusids = new Array();

            // id以cusid开头
            $("input[type='checkbox'][id^='cusid']").each(function () {
                // $(this)是遍历到的复选框
                if ($(this).is(':checked')) {
                    var id = $(this).prop("id").substr(5);   // cusid40
                    cusids.push(id);
                }
            });

            console.log(cusids);


            if (cusids.length == 0) {
                alert("必须至少选择一个会员才能删除");
            } else {

                if (confirm("确认删除吗？")) {

                    $.ajax({
                        url: "/customer/batch_delete_customer",
                        data: {
                            cusids: cusids,
                        },
                        dataType: "json",
                        type: "post",
                        traditional: true,   // 上传数组时必须添加这个属性
                        success: function (data) {
                            console.info(data);
                            if (data.success == true) {
                                window.location.href = "/customer/select_customer";
                            } else {
                                alert("选中的会员无法删除");
                            }
                        }
                    });


                }

            }

        });

        // 显示注册会员对话框
        $("#show-reg-customer-btn").click(function () {
            $("#reg-customer-div").show(2000);
            $("#lock-div").show(2000);
        });

        // 隐藏注册会员对话框
        $("#hide-reg-customer-btn").click(function () {
            $("#reg-customer-div").hide(2000);
            $("#lock-div").hide(2000);
        });


        // 验证用户名是否存在
        $("#cusName").change(function () {
            console.info($(this).val());

            $.ajax({
                url: "/customer/customer_name_exists",
                data: {
                    customerName: $(this).val()
                },
                dataType: "json",
                type: "post",
                success: function (data) {
                    //console.log(data);
                    if (data.meta.success == true) {
                        $("#msg-cusName").html("会员名不存在，可以注册").css("color", "green");
                    } else {
                        $("#msg-cusName").html("会员名存在，不可以注册").css("color", "red");
                    }
                }
            });

        });

        //选择上传图片，显示图片
        $("#head_img").change(function () {
            var file = document.getElementById("head_img");

            var imgUrl = window.URL.createObjectURL(file.files[0]);

            $("#upload_head_img").prop("src", imgUrl);
        });


    });

</script>


</body>
</html>